<template>
  <h1>El-表单组件</h1>
  <el-form style="width: 300px;margin: 0 auto;">
    <el-form-item label-width="80" label="用户名:">
      <el-input placeholder="请输入用户名" v-model="user.username"></el-input>
    </el-form-item>

    <el-form-item label-width="80" label="密码:">
      <el-input show-password placeholder="请输入密码" v-model="user.password"></el-input>
    </el-form-item>

    <el-form-item label-width="80" label="性别:">
      <el-radio-group v-model="user.sex">
        <el-radio-button label="男" :value="1"></el-radio-button>
        <el-radio-button label="女" :value="0"></el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item label-width="80" label="所在地:">
      <el-select v-model="user.city" placeholder="选择你的城市" >
        <el-option
            v-for="item in optionsList"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label-width="80" label="管理员:">
      <el-switch v-model="user.isAdmin"></el-switch>
    </el-form-item>
    <el-button @click="register" type="success">注册</el-button>
  </el-form>
</template>

<script setup>
import {ref} from "vue";

const register = () => {
  console.log(user.value);
}

const user = ref({
  username: '',
  password: '',
  sex: '1',
  city: '',
  isAdmin: false,
});

const optionsList = ref(['成都', '重庆', '北京', '上海']);

// const sex = ref([
//   {title: '男', value: '1'},
//   {title: '女', value: '0'}
// ]);
</script>

<style scoped>

</style>